<template>
  <el-dialog :title="id==null?'案例添加':'案例编辑'" width="95%" :visible.sync="show" :before-close="close">
    <el-form label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="大小">
        <el-select v-model="form.size" placeholder="请选择">
          <el-option
            v-for="item in sizes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片">
        <template v-if="form.imagePath">
          <img @click="onPick(0)" :src="imgConvert(form.imagePath)" alt=""
               style="width: 200px;min-width: 100px;min-height: 50px">
        </template>
        <template v-else>
          <el-button @click="onPick(0)">选择图片</el-button>
        </template>
      </el-form-item>

      <el-form-item label="banner">
        <template v-if="form.banner2">
          <img @click="onPick(1)" :src="imgConvert(form.banner2)" alt=""
               style="width: 200px;min-width: 100px;min-height: 50px">
        </template>
        <template v-else>
          <el-button @click="onPick(1)">选择图片</el-button>
        </template>
      </el-form-item>
    </el-form>

    <quill-editor ref="quill" v-model="form.richText"
                  :options="editorOption"></quill-editor>
    <el-button @click="onSave" style="margin-top: 10px">保存</el-button>


    <pre-single-image v-if="pickImageShow" :autoCrop="autoCrop" :fixedNumber="fixedNumber" :show.sync="pickImageShow"
                      @success="pick"></pre-single-image>
  </el-dialog>
</template>

<script>
  import Example from '../../../api/example'
  import convert from '../../../utils/convert'
  import pickImage from '../../../components/PickImage'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import PreSingleImage from '../../../components/Upload/preSingleImage'
  import {quillEditor} from 'vue-quill-editor'

  const PICK_ACTION_BANNER1 = 0
  const PICK_ACTION_BANNER2 = 1
  const PICK_ACTION_RICHTEXT = 2

  export default {
    name: "exampleEdit",
    props: ["show", "id"],
    components: {pickImage, quillEditor, PreSingleImage},
    data() {
      return {
        dialogVisible: false,
        form: {
          richText: '',
          type: 1,
          size: 1
        },
        pickImageShow: false,
        editorOption: {},
        quill: null,
        isBanner: true,
        types: [
          {label: "品牌策划", value: 1},
          {label: "品牌设计", value: 2},
          {label: "营销方案", value: 2},
          {label: "线下沙龙", value: 2},
          {label: "商学院", value: 2},
        ],
        sizes: [
          {label: '[2,2]', value: 1},
          {label: '[2,1]', value: 2},
          {label: '[4,1]', value: 3}
        ],
        fixedNumber: [],
        autoCrop: true,
        slice: 0
      }
    },
    methods: {
      close() {
        this.$emit("close")
      },
      getExample(id) {
        Example.getExampleById(id).then(res => {
          this.render(res.data.data)
        })
      },
      render(example) {
        this.form = example
      },
      onSave() {
        Example.saveExample(this.form).then(res => {
          if (res.data.succ == true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          } else {
            this.$message("失败")
          }
        })
      },
      // 触发
      onPick(slice) {
        this.slice = slice
        switch (slice) {
          case PICK_ACTION_BANNER1:
            switch (this.form.size) {
              case 1:
                this.fixedNumber = [2, 2]
                break
              case 2:
                this.fixedNumber = [2, 1]
                break
              case 3:
                this.fixedNumber = [4, 1]
                break
            }
            this.autoCrop = true
            break
          case PICK_ACTION_BANNER2:
            this.fixedNumber = []
            this.autoCrop = false
            break
          case  PICK_ACTION_RICHTEXT:
            this.fixedNumber = []
            this.autoCrop = true
            break
        }

        this.pickImageShow = true
      },
      imgConvert(path) {
        return convert.pathToUrl(path)
      },
      //接收
      pick(p) {

        this.pickImageShow = false
        switch (this.slice) {
          case PICK_ACTION_BANNER1:
            this.form.imagePath = p.path
            this.form.banner = p.id
            break
          case PICK_ACTION_BANNER2:
            this.form.banner2 = p.path
            break
          case  PICK_ACTION_RICHTEXT:
            let length = this.quill.selection.savedRange.index;
            this.quill.insertEmbed(length, 'image', p.path)
            // 调整光标到最后
            this.quill.setSelection(length + 1)
            break
        }
      }
    },
    mounted() {
      var _this = this
      var imgHandler = async function (state) {
        if (state) {
          _this.onPick(PICK_ACTION_RICHTEXT)
        }
      }

      this.$nextTick(() => {
        this.quill = this.$refs.quill.quill
        this.quill.getModule("toolbar").addHandler("image", imgHandler)
        if (this.id) {
          this.getExample(this.id)
        }
      })
    },
  }
</script>

<style scoped>
  .quill-editor {
    height: 220px;
    margin-bottom: 50px;
  }
</style>
